<!-- 学习详情内容 -->
<script setup>
import { useRouter } from 'vue-router';
import { onMounted, ref, reactive } from 'vue';
import axios from 'axios';
//获取路由器对象
let router = useRouter();
let title = ref('')
const titles = [
  '环保基础知识',
  '法律解读',
  '志愿服务',
  '视频',
  '文献',
  '论坛'
];
let knowledgeList = ref([]);

//组件挂载完毕
onMounted(() => {
  // vue获取路由中的id
  let id = router.currentRoute.value.params.id;
  // 检查id是否为有效数字
  if (id && !isNaN(id)) {
    const index = parseInt(id, 10) - 1; // 转换为索引（假设id从1开始）
    if (index >= 0 && index < titles.length) {
      title.value = titles[index]; // 设置对应的标题
    } else {
      console.warn('无效的id值');
    }
  } else {
    console.warn('id参数缺失或无效');
  } 
  axios.get(`http://localhost:8080/api/environmental-knowledge/${id}`).then(response => {
    // 处理响应数据
    knowledgeList.value = response.data;
  })
    .catch(error => {
      // 处理错误
      console.error(error);
    });
});
const onClickLeft = () => {
  router.push('/study')
}
</script>
<template>
  <div class=''>
    <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div>
      <van-cell-group inset v-for="knowledge in knowledgeList" :key="knowledge.id">
        <van-card :desc="knowledge.knowledge_intro || '暂无描述'" :title="knowledge.knowledge_name"
          :thumb="knowledge.image_url">
        </van-card>
        <van-cell center :title="`${knowledge.likes}条新留言·${knowledge.favorites}笔新赞·${knowledge.shares}次分享`"
          :value="knowledge.publish_time || '暂无发布时间'" />
        <van-divider />
      </van-cell-group>
    </div>
  </div>
</template>

<style scoped></style>